import React, { Component } from 'react'
import "./coursebasket.scss"
import { getApiUserShopCart , getApiDeleteShopCart } from "../../axios/api"
import { get } from '../../axios/localstorage';
import { message } from 'antd';

export default class coursebasket extends Component {

    state = {
        data:{},
        list:[],
        money:0,
        showAll:false,
    }

    componentWillMount(){
        window.scroll(0,0)
        this.getData();
    }

    getData=()=>{
        getApiUserShopCart({token:get('token')})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                let m = 0;
                for(var i=0;i<data.length;i++){
                    // m = m + parseFloat(data[i].money);
                    data[i].chosen = false;
                }
                console.log(m);
                this.setState({
                    list:data,
                    money:m
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoChooseItem=(index)=>{
        let data = this.state.list;
        data[index].chosen = !data[index].chosen;
        this.setState({
            list:data,
        })

        setTimeout(()=>{
            this.countMoney();
        },50)
    }

    chooseAllItem=()=>{
        let data = this.state.list;
        
        for(var i=0;i<data.length;i++){
            if(this.state.showAll){
                data[i].chosen = false;
            }else{
                data[i].chosen = true;
            }
        }

        this.setState({
            list:data,
        })

        setTimeout(()=>{
            this.countMoney();
        },50)
    }

    countMoney=()=>{
        let data = this.state.list;
        let m = 0;
        let num = 0;
        for(var i=0;i<data.length;i++){
            if(data[i].chosen){
                m = m + parseFloat(data[i].money);
                num ++;
            }
        }

        if(num === data.length){
            this.setState({
                money:m,
                showAll:true
            })
        }else{
            this.setState({
                money:m,
                showAll:false
            })
        }

        
    }

    gotoPay=()=>{
        let arr = [];
        let data = this.state.list;
        for(var i=0;i<data.length;i++){
            if(data[i].chosen){
                arr.push(data[i].id)
            }
        }

        if(arr.length === 0){
            message.info('请先选择需要结算的商品!');
            return false;
        }

        let ids = arr.join(',')
        this.gotoPage('/pay?oid='+ids);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoDel=()=>{
        let arr = [];
        let data = this.state.list;
        for(var i=0;i<data.length;i++){
            if(data[i].chosen){
                arr.push(data[i].id)
            }
        }

        if(arr.length === 0){
            message.info('请先选择需要删除的商品!');
            return false;
        }

        let param = {
            ids:arr.join(','),
            token:get('token')
        }

        getApiDeleteShopCart(param)
        .then( req =>{
            if(req.data.code === 1){
                this.getData();
            }
        }).catch( err =>{
            console.error(err);
        })
    }


    render() {
        return (
            <div className="coursebasket">
                <div className="cmain">
                    <div className="thead">
                        <p>课程篮</p>
                        <div className="del" onClick={()=>{this.gotoDel()}}>
                            <img alt="" src="assets/imgs/shanchu.png" />
                            <h4>删除</h4>
                        </div>
                    </div>

                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>课程篮暂无商品</p>
                    </div>

                    <div className="mbox">
                        {
                            this.state.list.map((item,index)=>{
                                return <div className="info" key={index}>
                                            <div className={item.chosen?"ispan chosen":"ispan"}onClick={()=>{this.gotoChooseItem(index)}}>
                                                <img alt="" src="assets/imgs/xuanzegou.png" />
                                            </div>
                                            <div className="ileft" style={item.type === 1?{backgroundImage:"url('"+item.info.image_text+"')"}:{backgroundImage:"url('"+item.info.thumb_text+"')"}}>
                                                <span hidden={item.type === 1}>直播</span>
                                            </div>
                                            <div className="iright">
                                                <div className="title">
                                                    <h2>{item.info.title}</h2>
                                                    
                                                    <div hidden={!item.info.is_new}>精品</div>
                                                </div>
                                                <div className="details">
                                                    <img alt="" src="assets/imgs/renhsu.png" />
                                                    <p>{item.info.sale_num}人</p>
                                                    <img alt="" src="assets/imgs/leixing.png" />
                                                    <p>{item.info.nums}课</p>
                                                    <img alt="" src="assets/imgs/leibie.png" />
                                                    <p>{item.info.label}</p>
                                                    <img alt="" src="assets/imgs/shijain.png" />
                                                    <p>{item.info.create_time_text}</p>
                                                </div>
                                                <h4>¥ {item.money}</h4>
                                            </div>
                                        </div>
                            })
                        }
                    </div>

                    <div className="count">
                        <div className="cflex" onClick={()=>{this.chooseAllItem()}}>
                            <span className={this.state.showAll?"chosen":""}>
                                <img alt="" src="assets/imgs/xuanzegou.png" />
                            </span>
                            <h2>全选</h2>
                        </div>
                        <h2>总计：</h2>
                        <p>¥{this.state.money}</p>
                        <button onClick={()=>{this.gotoPay()}}>去结算</button>
                    </div>
                </div>
            </div>
        )
    }
}
